import React, {useEffect, useState} from "react";
import {useLocation, useNavigate, useParams, Outlet} from "react-router-dom";
import {Avatarnpm, Col, Divider, Menu, Row, Skeleton} from "antd";
import axios from "axios";
import Icon, {EditOutlined, EllipsisOutlined, SettingOutlined} from "@ant-design/icons";
import Meta from "antd/es/card/Meta";
import './cardcss.css';

export default function ProvincePage() {
    const [result, setResult] = useState([]);

    let params = useParams();
    let pro = params.province || '全部';
    console.log("pro:", pro);

    // useEffect(() => {
    //     axios.post(`/api/home/${pro}`, {province: pro})
    //         .then(res => {
    //             console.log(res);
    //             setResult(res.data);
    //         }).catch(err => {
    //             console.log(err);
    //     })
    // }, [pro]);
    useEffect(() => {
        async function fetctData() {
            const result = await axios.post(`/api/home/${pro}`, {province: pro})
            console.log(result.data);
            setResult(result.data);
        };
        fetctData();
    }, [pro]);
    return(
        <div>
        <Divider>{pro}</Divider>
            {result.map((item) => {
                return(
                    <div className="card">
                        <div className="card-body">
                            <div className="card-title-province">
                                <h2>
                                    {item.title}
                                </h2>
                                <hr/>
                            </div>
                            <div className="card-content">
                                <p>
                                    {item.info}
                                </p>
                            </div>
                            <hr/>
                            <div className="card-contact-signal-time">
                                <p>
                                    联系方式：{item.contact}
                                </p>
                                <hr/>
                                <p>暗号:{item.signal}</p>
                                <p>江西省</p>
                                <time className="card-date">{item.created_time}</time>
                            </div>
                        </div>
                        <Divider></Divider>
                    </div>
                )
            })}
        </div>
    );
}